<template>
<el-container style="height: 100%">
    <el-aside width="auto"><common-aside></common-aside></el-aside>
    <el-container>
      <el-header><common-header></common-header></el-header>
      <common-tab></common-tab>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
     <ml-change-password ref="changePassword"></ml-change-password>
  </el-container>
  <!-- <el-container style="height: 100%">
    
    <el-aside width="auto"><common-aside></common-aside></el-aside>
    <el-container>
      <common-header @changePassword="changePassword"></common-header>
      <common-tab></common-tab>
      <el-main>
        主要视图
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container> -->
    <!-- 头部区域 -->
    <!-- <el-header>
      <router-link to="/welcome" style="text-decoration: none;">
        <div class="logo_tile">
          <img src="../assets/image/logo.jpg" alt height="70px" />
          <h2>商城后台管理系统</h2>
        </div>
      </router-link>

      <div class="userinfo">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner">
            <img src="../assets/user.png" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header> -->

    <!-- 下面的主体区域 -->
    <!-- <el-container>
      
      <el-aside :width="iscollapse ? '65px' : '200px'">
       
        <div class="toggleBar" @click="iscollapse=!iscollapse">|||</div>
        
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#333744"
          text-color="#fff"
          router
          unique-opened
          :collapse="iscollapse"
          :collapse-transition="false"
          active-text-color="#409EFF"
        >
          
          <el-submenu
            :index="item.id + ''"
            v-for="(item, i) in menus"
            :key="item.id"
            :class="iscollapse ? 'el_submenu_small': 'el_submenu_large'"
          >
            <template slot="title">
              
              <i :class="['iconfont', iconlist[i]]"></i>
              <span>{{item.name}}</span>
            </template>
            
            <el-menu-item
              :index="'' + subitem.path"
              v-for="subitem in item.children"
              :key="subitem.id"
            >
              <i class="el-icon-menu"></i>
              {{subitem.name}}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container> -->
    <!-- <span style="color: gray; position: fixed; bottom: 0; right: 0;">若有其他需求，请联系qq:532526447</span> -->
   
</template>

<script>
import mlChangePassword from "../common/_changePassword.vue";
import CommonAside from './CommonAside';
import CommonTab from './CommonTab'
import CommonHeader from './CommonHeader'
export default {
  data() {
    return {
      // 左侧菜单列表数组，默认为空
      menus: [],
      // 左侧菜单项对应的图标数组
      iconlist: [
        "icon-users",
        "icon-tijikongjian",
        "icon-shangpin",
        "icon-danju",
        "icon-baobiao",
        "icon-baobiao",
        "icon-baobiao",
        "icon-baobiao",
        "icon-danju",
        "icon-baobiao",
        "icon-danju",
      ],
      // 是否被折叠， 默认为 false
      iscollapse: false,
    };
  },
  components: {
    mlChangePassword,
    CommonTab,
    CommonAside,
    CommonHeader
  },
  created() {
    //this.getmenus();
  },
  methods: {
    changePassword() {
      //  alert(2)
      console.log(789);
      this.$refs.changePassword.show();
    },
    // 点击按钮，退出登录
    logout() {
      // 清空保存的 token 信息
      window.sessionStorage.removeItem("token");
      // 强制跳转到登录页面
      this.$router.push("/login");
    },
    // 获取左侧菜单列表
    getmenus() {
      // const { data: res } = await this.$http.get('menus')
      // if (res.meta.status !== 200) return this.$message.error('获取左侧菜单列表失败！')
      // // 把获取到的菜单数据，保存到 data 的 menus 数组中，供页面使用
      // this.menus = res.data
      this.$http.post("/manage/admin/getQXList").then((res) => {
        // console.log(res)
        if (res.data.status == 1) {
          this.menus = res.data.data;
        } else {
          this.menus = [
            {
              id: 125,
              authName: "用户管理",
              path: "userList",
              children: [
                {
                  id: 110,
                  authName: "用户列表",
                  path: "userList",
                  children: [],
                  order: null,
                },
                {
                  id: 111,
                  authName: "用户反馈列表",
                  path: "userfeedback",
                  children: [],
                  order: null,
                },
                {
                  id: 112,
                  authName: "实名失败列表",
                  path: "userRealname",
                  children: [],
                  order: null,
                },
              ],
              order: 1,
            },
            {
              id: 103,
              authName: "权限管理",
              path: "Permission",
              children: [
                {
                  id: 110,
                  authName: "系统用户",
                  path: "systemUser",
                  children: [],
                  order: null,
                },
                {
                  id: 111,
                  authName: "角色列表",
                  path: "roles",
                  children: [],
                  order: null,
                },
                {
                  id: 112,
                  authName: "权限列表",
                  path: "Permission",
                  children: [],
                  order: null,
                },
              ],
              order: 2,
            },
            {
              id: 110,
              authName: "系统管理",
              path: "timer",
              children: [
                {
                  id: 111,
                  authName: "定时器管理",
                  path: "timer",
                  children: [],
                  order: 1,
                },
              ],
            },
            {
              id: 101,
              authName: "商品管理",
              path: "goods",
              children: [
                {
                  id: 104,
                  authName: "商品列表",
                  path: "goods",
                  children: [],
                  order: 1,
                },
                {
                  id: 115,
                  authName: "分类参数",
                  path: "params",
                  children: [],
                  order: 2,
                },
                {
                  id: 121,
                  authName: "商品分类",
                  path: "categories",
                  children: [],
                  order: 3,
                },
              ],
              order: 3,
            },
            {
              id: 102,
              authName: "订单管理",
              path: "orders",
              children: [
                {
                  id: 107,
                  authName: "订单列表",
                  path: "orders",
                  children: [],
                  order: null,
                },
              ],
              order: 4,
            },
            {
              id: 145,
              authName: "数据统计",
              path: "reports",
              children: [
                {
                  id: 146,
                  authName: "数据报表",
                  path: "reports",
                  children: [],
                  order: null,
                },
                {
                  id: 147,
                  authName: "异常数据列表",
                  path: "abnormalData",
                  children: [],
                  order: null,
                },
              ],
              order: 5,
            },
            {
              id: 150,
              authName: "申购管理",
              path: "shengou",
              children: [
                {
                  id: 146,
                  authName: "申购列表",
                  path: "shengou",
                  children: [],
                  order: null,
                },
              ],
              order: 6,
            },
            {
              id: 153,
              authName: "客服管理",
              path: "kefu",
              children: [
                {
                  id: 146,
                  authName: "在线客服",
                  path: "kefu",
                  children: [],
                  order: null,
                },
              ],
              order: 6,
            },
            {
              id: 154,
              authName: "配置管理",
              path: "exchange",
              children: [
                {
                  id: 155,
                  authName: "汇率管理",
                  path: "exchange",
                  children: [],
                  order: null,
                },
                {
                  id: 156,
                  authName: "APP版本管理",
                  path: "versions",
                  children: [],
                  order: null,
                },
              ],
              order: 7,
            },
            {
              id: 155,
              authName: "商家中心",
              path: "merchantCenter",
              children: [
                {
                  id: 155,
                  authName: "商家中心",
                  path: "merchantCenter",
                  children: [],
                  order: null,
                },
              ],
              order: 8,
            },
          ];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  user-select: none;
  .userinfo {
    position: absolute;
    top: 10px;
    right: 30px;
    height: 40px;
    /* background-color: #344443; */
  }
  .userinfo span {
    color: rgb(243, 244, 247);
    display: block;
    line-height: 40px;
  }
  .userinfo img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: right;
    vertical-align: middle;
    margin-left: 15px;
  }
  .logo_tile {
    display: flex;
    align-items: center;
    color: white;
    h2 {
      font-weight: 200;
      margin-left: 15px;
    }
  }
  .el-button {
    margin-right: 10px;
  }
}

.el-aside {
  background-color: #333744;
  user-select: none;
}

.el-main {
  background-color: #eaedf1;
}

.iconfont {
  margin-right: 8px;
}

.toggleBar {
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  background-color: #4a5064;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  user-select: none;
}

.el_submenu_large {
  width: 200px;
}
.el_submenu_small {
  width: 65px;
}
</style>
